<!--  -->
<template>
  <div class="orderlsit">
    <section class="container-main-header">
      <section class="header-left">
        <i class="el-icon-menu"></i>
        <h3>首页</h3>
        <span class="solidus">/</span>
        <h3>商品</h3>
        <span class="solidus">/</span>
        <span>商品列表</span>
      </section>
      <section class="header-right">
        <i class="el-icon-pear"></i>
      </section>
    </section>
    <section class="container-main-content">
      <div class="search-filters">
        <div class="search-filters-top">
          <div class="topLeft">
            <i class="el-icon-search"></i>&nbsp;&nbsp;
            <span>筛选搜索：</span>
          </div>
          <div class="topRight">
            <el-button style="margin-right:15px;" class="resetBtn">重置</el-button>
            <el-button type="primary" class="searFilBtn">查询搜索</el-button>
          </div>
        </div>
        <div class="search-filters-bottom">
          <div class="input-item">
            <span>输入搜索：</span>
            <el-input
              v-model="input"
              placeholder="商品名称"
              style="width:171px;height242px;margin-right:20px"
            ></el-input>
          </div>
          <div class="input-item">
            <span>商品货号：</span>
            <el-input
              v-model="input1"
              placeholder="商品货号"
              style="width:171px;height242px;margin-right:20px"
            ></el-input>
          </div>

          <div class="input-item">
            <span>商品分类：</span>
            <el-select
              v-model="select1"
              slot="prepend"
              placeholder="请选择"
              style="width:171px;height:24px;margin-right:20px"
            >
              <el-option label="服装" value="4"></el-option>
              <el-option label="手机" value="5"></el-option>
              <el-option label="家用电器" value="6"></el-option>
            </el-select>
          </div>

          <div class="input-item">
            <span>商家品牌：</span>
            <el-select
              v-model="select2"
              slot="prepend"
              placeholder="请选择品牌"
              style="width:171px;height:24px;margin-right:20px"
            >
              <el-option label="小米" value="7"></el-option>
              <el-option label="七匹狼" value="8"></el-option>
              <el-option label="海澜之家" value="9"></el-option>
            </el-select>
          </div>
          <div class="input-item">
            <span>上架状态：</span>
            <el-select
              v-model="select3"
              slot="prepend"
              placeholder="请选择"
              style="width:171px;height:24px;margin-right:20px"
            >
              <el-option label="上架" value="10"></el-option>
              <el-option label="下架" value="11"></el-option>
            </el-select>
          </div>
          <div class="input-item">
            <span>审核状态：</span>
            <el-select
              v-model="select4"
              slot="prepend"
              placeholder="全部"
              style="width:171px;height:24px;margin-right:20px"
            >
              <el-option label="审核通过" value="12"></el-option>
              <el-option label="未通过" value="13"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="dataList">
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <i class="el-icon-document"></i>&nbsp;&nbsp;
              <span>数据列表</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!--表格 -->

      <div class="dataListTable">
        <template>
          <el-table
            ref="multipleTable"
            :data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"
            :border="true"
            tooltip-effect="dark"
            style="width: 100%;border:1px solid #ccc;"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" style="border:1px solid #ccc" align="center"></el-table-column>
            <el-table-column label="编号" width="50" style="border:1px solid #ccc" align="center">
              <template slot-scope="scope">{{ scope.row.numbering }}</template>
            </el-table-column>
            <el-table-column label="商品图片" style="border:1px solid #ccc" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.ImageUrl" style="height: 50px" />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" style="border:1px solid #ccc" align="center" width="150">
              <template slot-scope="scope">
                {{ scope.row.productName }}
                <br />
                {{ scope.row.brand }}
              </template>
            </el-table-column>
            <el-table-column label="价格/货号" style="border:1px solid #ccc" align="center" width="150">
              <template slot-scope="scope">
                价格为：￥{{ scope.row.price }}
                <br />
                货号：{{ scope.row.itemNo }}
              </template>
            </el-table-column>

            <el-table-column label="标签" style="border:1px solid #ccc" align="center" width="120">
              <template slot-scope="scope">
                上架：
                <el-switch
                  v-model="scope.row.value22"
                  active-color="#64, 158, 255"
                  inactive-color="#220, 223, 230"
                ></el-switch>新品：
                <el-switch
                  v-model="scope.row.value23"
                  active-color="#64, 158, 255"
                  inactive-color="#220, 223, 230"
                ></el-switch>推荐：
                <el-switch
                  v-model="scope.row.value24"
                  active-color="#64, 158, 255"
                  inactive-color="#220, 223, 230"
                ></el-switch>
              </template>
            </el-table-column>

            <el-table-column label="排序" style="border:1px solid #ccc" align="center">
              <template slot-scope="scope">{{ scope.row.paixu }}</template>
            </el-table-column>
            <el-table-column label="SKU库存" style="border:1px solid #ccc" align="center">
              <span class="el-icon-edit"></span>
            </el-table-column>
            <el-table-column prop="sales" label="销量" style="border:1px solid #ccc" align="center"></el-table-column>
            <el-table-column label="审核状态" style="border:1px solid #ccc">
              <p>未审核</p>
              <p>审核详情</p>
            </el-table-column>

            <el-table-column label="操作" width="150" style="border:1px solid #ccc" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      <div class="pagination">
        <div class="pagination-left">
          <el-select
            v-model="select5"
            slot="prepend"
            placeholder="请选择"
            style="width:171px;height:24px;margin:0;margin-right:20px;"
          >
            <el-option label="餐厅名" value="99"></el-option>
            <el-option label="订单号" value="991"></el-option>
            <el-option label="用户电话" value="333"></el-option>
          </el-select>
          <el-button type="primary" class="sureBtn">确定</el-button>
        </div>

        <!-- :current-page="currentPage4" -->
        <!-- @size-change="handleSizeChange" -->

        <div class="pagination-right">
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15,]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            style="float:right;"
          ></el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value: "",
      input: "",
      input1: "",
      select1: "",
      select2: "",
      select3: "",
      select4: "",
      select5:"",
      tableData: [
        {
          numbering: "26",
          ImageUrl:
            "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
          date: "2016-05-03",
          productName: "华为 HUAWEI P20",
          brand: "品牌：华为",
          price: "3788",
          itemNo: "6946605",
          value22: true,
          value23: true,
          value24: true,
          paixu: 100,
          sales: 0
        },
        {
          numbering: "27",
          ImageUrl:
            "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
          date: "2016-05-03",
          productName: "华为 HUAWEI P20",
          brand: "品牌：华为",
          price: "3788",
          itemNo: "6946605",
          value22: true,
          value23: true,
          value24: true,
          paixu: 100,
          sales: 0
        },
        {
          numbering: "28",
          ImageUrl:
            "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
          date: "2016-05-03",
          productName: "华为 HUAWEI P20",
          brand: "品牌：华为",
          price: "3788",
          itemNo: "6946605",
          value22: true,
          value23: true,
          value24: true,
          paixu: 100,
          sales: 0
        },
        {
          numbering: "29",
          ImageUrl:
            "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
          date: "2016-05-03",
          productName: "华为 HUAWEI P20",
          brand: "品牌：华为",
          price: "3788",
          itemNo: "6946605",
          value22: true,
          value23: true,
          value24: true,
          paixu: 100,
          sales: 0
        },
        {
          numbering: "30",
          ImageUrl:
            "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
          date: "2016-05-03",
          productName: "华为 HUAWEI P20",
          brand: "品牌：华为",
          price: "3788",
          itemNo: "6946605",
          value22: true,
          value23: true,
          value24: true,
          paixu: 100,
          sales: 0
        },
        {
          numbering: "31",
          ImageUrl:
            "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
          date: "2016-05-03",
          productName: "华为 HUAWEI P20",
          brand: "品牌：华为",
          price: "3788",
          itemNo: "6946605",
          value22: true,
          value23: true,
          value24: true,
          paixu: 100,
          sales: 0
        }
      ],
      // 分页数据
      currentPage: 1,
      pageSize: 5,
      total: 0, // 总条目数
      multipleSelection: [],
      border: true,
      select: "",
      input: "",
      value1: "",
      border: true
      // border: true
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<<<<<<< HEAD
<style  scoped>
.container-main-header {
  padding: 0 20px;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-left h3 {
  font-size: 14px;
}
.solidus {
  margin: 0 5px;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}
/* .orderlsit {
  min-height: 1200px;
} */
.container-main-content,
.search-filters {
  padding: 20px;
}
.search-filters {
  width: 100%;
  border: 1px solid #ececec;
}
.search-filters-top {
  display: flex;
  justify-content: space-between;
}
.resetBtn,
.searFilBtn {
  padding: 9px 15px;
  width: 56px;
  height: 32px;
  font-size: 12px;
}
.searFilBtn {
  width: 80px;
  margin: 0;
}
.search-filters-bottom {
  display: flex;
  flex-wrap: wrap;
  padding-right: 100px;
  padding-left: 30px;
}
.input-item {
  margin: 20px;
}
.el-row {
  margin: 20px 0;
}
.el-col {
  border: 1px solid #ececec;
  height: 60px;
  padding: 20px;
}
.dataListTable {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.sureBtn {
  padding: 9px 15px;
  height: 32px;
  font-size: 12px;
  width: 80px;
  margin: 0;
}
.el-icon-edit {
  font-size: 20px;
}
</style>